<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
            <el-form :model="query" ref="query" :rules="rules" slot="form" label-width="85px" label-position="right" v-collapse="true">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="query.schoolName" :provinceId="query.provinceId" :cityId="query.cityId" :areaId="query.areaId" style="width:100%" @change='getSchoolItem'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="经销商">
                            <el-input v-model="query.orguserName" style="width:100%" placeholder="请输入经销商"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="用户手机号" prop="parentPhone">
                            <el-input v-model="query.parentPhone" style="width:100%" placeholder="请输入手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="当前状态">
                            <el-select v-model="query.status" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in query.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发放时间">
                            <el-row>
                                <el-col :span="11">
                                    <start-date v-model="query.startDate" :clearable="true" :picker-options="query.pickerOptions1" :end-date-options.sync="query.pickerOptions2" :state="false"></start-date>
                                </el-col>
                                <el-col align="center" :span="2">
                                    至
                                </el-col>
                                <el-col :span="11">
                                    <end-date v-model="query.endDate" :clearable="true" :picker-options="query.pickerOptions2" :start-date-options.sync="query.pickerOptions1" :state="false"></end-date>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('query')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <el-button @click="btnExport">导出列表</el-button>
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                <el-table-column label="经销商" align="center" prop="orguserName">
                    <template scope="scope">
                        {{scope.row.orguserName || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="学校名称" align="center" prop="schoolName">
                    <template scope="scope">
                        {{scope.row.schoolName || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="卡券类型" align="center">
                    <template scope="scope">
                        {{fifter(scope.row.serviceType)}}
                    </template>
                </el-table-column>
                <el-table-column label="卡券ID" align="center" prop="cardId">
                    <template scope="scope">
                        {{scope.row.cardId || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="用户手机号" align="center" prop="parentPhone">
                    <template scope="scope">
                        {{scope.row.parentPhone || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="学生" align="center" prop="studentName">
                    <template scope="scope">
                        {{scope.row.studentName || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="发放时间" align="center" prop="sendTime">
                    <template scope="scope">
                        {{scope.row.sendTime || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="使用时间" align="center" prop="useTime">
                    <template scope="scope">
                        {{scope.row.useTime || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="服务有效时长" align="center" prop="month">
                    <template scope="scope">
                        {{scope.row.month == 1 ? '月' : scope.row.month == 6 ? '半年' : scope.row.month == 12 ? '年' : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="当前状态" align="center" prop="status">
                    <template scope="scope">
                        {{scope.row.status == 0 ? '未使用' : scope.row.status == 1 ? '已使用' : scope.row.status == 2 ? '未发放' : '--'}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import { pagePurchaseCard } from 'api/serviceManage';
import { mapState, mapActions, mapGetters} from 'vuex';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import validate from '@/utils/validate';
export default {
    name: 'serviceAuditList',

    components: { Levelbar, TableLayout, province, city, region, school, startDate, endDate},
    data() {
        return {
            rules: {
                parentPhone: [...validate.phone()]
            },
            auditData: {
                dialogState: false,
                dataList: ''
            },
            loading: true,
            schoolList: [],
            tableData: [],
            pageQuery: {
                currentpage: 1,
                total: 0
            },
            query: {
                provinceId: '',
                cityId: '',
                areaId: '',
                schoolId: '',
                schoolName: '',
                orguserName: '',
                parentPhone: '',
                status: '',
                options: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: '0',
                        label: '未使用'
                    },
                    {
                        value: '1',
                        label: '已使用'
                    },
                    {
                        value: '2',
                        label: '未发放'
                    }
                ],
                startDate: '',
                endDate: '',
                pickerOptions1: {},
                pickerOptions2: {}
            }
        };
    },
    created() {
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters(['token'])
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.pageQuery.currentpage = 1;
                    this.queryData();
                } else {
                    return false;
                }
            });
            
        },
        queryData() {
            let provinceId = this.query.provinceId; // 省id
            let cityId = this.query.cityId; // 市id
            let areaId = this.query.areaId; // 区id
            let schoolId = this.query.schoolId; // 学校id
            this.loading= true;
            pagePurchaseCard(
                provinceId, // 省idp
                cityId, // 市id
                areaId, // 区id
                this.query.orguserName,
                schoolId, // 学校
                this.query.parentPhone,
                this.query.status,
                this.fifterDate(this.query.startDate),
                this.fifterDate(this.query.endDate),
                this.pageQuery.currentpage,
                this.config.pageSize,
      )
        .then(response => {
            this.loading = false;
            this.tableData = response.data.content.list;
            this.pageQuery.total = response.data.content.pagination.total;
        })
        .catch(() => {
            this.loading = false;
        });
        },
        getSchoolItem(schoolId) {
            this.query.schoolId = schoolId;
        },
        // 返回年月日时分秒
        fifterDate(date) {
            if (typeof date === 'string') {
                return date;
            } else {
                let month = this.addZero(date.getMonth() + 1 + '');
                let day = this.addZero(date.getDate() + '');
            // let hour = this.addZero(date.getHours() + '');
            // let minutes = this.addZero(date.getMinutes() + '');
            // let seconds = this.addZero(date.getSeconds() + '');
            // return `${date.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
                return `${date.getFullYear()}-${month}-${day}`;
            }
        },
    // 加0
        addZero(str) {
            if (typeof str === 'string') {
                return str.length > 1 ? str : '0' + str;
            }
        },
        fifter(v) {
            switch (v) {
                case '123547':
                    return '校园e直播';
                case '123552':
                    return '报平安';
                case '123551':
                    return '空中课堂';
                case '123553':
                    return '家校通';
                case '123554':
                    return '会员服务';
                default:
                    return '--';
            }
        },
        btnExport() {
            window.location.href = `${LOCAL_API.ly}/purchaseCard/exportPurchaseCard?token=${this.token}&provinceId=${this.query.provinceId}&cityId=${this.query.cityId}&areaId=${this.query.areaId}&orguserName=${this.query.orguserName}&schoolId=${this.query.schoolId}&parentPhone=${this.query.parentPhone}&status=${this.query.status}&sendTimeFrom=${this.fifterDate(this.query.startDate)}&sendTimeTo=${this.fifterDate(this.query.endDate)}`;
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  .app-levelbar {
    height: 35px;
  }
}
</style>

